<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Crafty - events</title>
	<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />

	<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' 	type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="/favicon.ico">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="/github.css"/>
	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-23935213-2']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

	</script>
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="/">Home</a></li>
						<li><a href="/getting-started/">Getting started</a></li>
						<li><a href="/documentation/">Documentation</a></li>
						<li><a href="/api/">API</a></li>
						<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
						<li><a href="/components/">Components</a></li>
						<li class="emph"><a href="/#install">Download</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Controls<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="events-page"><div class="eventPageBlock"><h4>Controls</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>TriggerInputDown <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {name}</span></span>]</span></dt><dd>When a trigger group is activated</dd></dl><dl class="trigger"><dt>TriggerInputUp <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {name, downFor}</span></span>]</span></dt><dd>When a trigger group is released</dd></dl><dl class="trigger"><dt>DirectionalInput <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {name, x, y}</span></span>]</span></dt><dd>When a directional input changes</dd></dl></div></div></div><div class="eventPageBlock"><h4>Jumper</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>CheckJumping </dt><dd>When entity is about to jump. This event is triggered with the object the entity is about to jump from (if it exists). Third parties can respond to this event and enable the entity to jump.</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.selected</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>CraftyFocus </dt><dd>is triggered when Crafty&#x27;s stage gets selected</dd></dl><dl class="trigger"><dt>CraftyBlur </dt><dd>is triggered when Crafty&#x27;s stage is no longer selected</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.mouseWheelDispatch</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>MouseWheelScroll <span>[<span class="trigger-data"><span class="obj-name">Scroll direction (up | down)</span><span class="obj-props"> = { direction: +1 | -1}</span></span>]</span></dt><dd>is triggered when mouse is scrolled on stage</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.keyboardDispatch</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>KeyDown <span>[<span class="trigger-data"><span class="obj-name">Crafty&#x27;s KeyboardEvent</span><span class="obj-props"> = { key: `Crafty.keys` keyCode (Number), originalEvent: original KeyboardEvent }</span></span>]</span></dt><dd>is triggered for each entity when the DOM &#x27;keydown&#x27; event is triggered.</dd></dl><dl class="trigger"><dt>KeyUp <span>[<span class="trigger-data"><span class="obj-name">Crafty&#x27;s KeyboardEvent</span><span class="obj-props"> = { key: `Crafty.keys` keyCode (Number), originalEvent: original KeyboardEvent }</span></span>]</span></dt><dd>is triggered for each entity when the DOM &#x27;keyup&#x27; event is triggered.</dd></dl></div></div></div><div class="eventPageBlock"><h4>Mouse</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>MouseOver <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>when the mouse enters</dd></dl><dl class="trigger"><dt>MouseOut <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>when the mouse leaves</dd></dl><dl class="trigger"><dt>MouseDown <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>when the mouse button is pressed on</dd></dl><dl class="trigger"><dt>MouseUp <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>when the mouse button is released on</dd></dl><dl class="trigger"><dt>Click <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>when the user clicks</dd></dl><dl class="trigger"><dt>DoubleClick <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>when the user double clicks</dd></dl><dl class="trigger"><dt>MouseMove <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>when the mouse is over and moves</dd></dl></div></div></div><div class="eventPageBlock"><h4>Touch</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>TouchStart <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {TouchPoint}</span></span>]</span></dt><dd>when entity is touched</dd></dl><dl class="trigger"><dt>TouchMove <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {TouchPoint}</span></span>]</span></dt><dd>when finger is moved over entity</dd></dl><dl class="trigger"><dt>TouchCancel <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {TouchPoint}</span></span>]</span></dt><dd>when a touch event has been disrupted in some way</dd></dl><dl class="trigger"><dt>TouchEnd <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {null}</span></span>]</span></dt><dd>when the finger is raised over the entity, or when finger leaves entity.  (Passes no data)</dd></dl></div></div></div><div class="eventPageBlock"><h4>.areaMap</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>NewAreaMap <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Crafty.polygon}</span></span>]</span></dt><dd>when a new areaMap is assigned</dd></dl></div></div></div><div class="eventPageBlock"><h4>MouseDrag</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Dragging <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>is triggered each frame the entity is being dragged</dd></dl><dl class="trigger"><dt>StartDrag <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>is triggered when dragging begins</dd></dl><dl class="trigger"><dt>StopDrag <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {MouseEvent}</span></span>]</span></dt><dd>is triggered when dragging ends</dd></dl></div></div></div><div class="eventPageBlock"><h4>Keyboard</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>KeyDown <span>[<span class="trigger-data"><span class="obj-name">Crafty&#x27;s KeyboardEvent</span><span class="obj-props"> = { key: `Crafty.keys` keyCode (Number), originalEvent: original KeyboardEvent }</span></span>]</span></dt><dd>is triggered for each entity when the DOM &#x27;keydown&#x27; event is triggered.</dd></dl><dl class="trigger"><dt>KeyUp <span>[<span class="trigger-data"><span class="obj-name">Crafty&#x27;s KeyboardEvent</span><span class="obj-props"> = { key: `Crafty.keys` keyCode (Number), originalEvent: original KeyboardEvent }</span></span>]</span></dt><dd>is triggered for each entity when the DOM &#x27;keyup&#x27; event is triggered.</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty Core</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>NewEntityName <span>[<span class="trigger-data"><span class="obj-name">entity name</span><span class="obj-props"> = {String}</span></span>]</span></dt><dd>After setting new name for entity</dd></dl><dl class="trigger"><dt>NewComponent <span>[<span class="trigger-data"><span class="obj-name">Component</span><span class="obj-props"> = {String}</span></span>]</span></dt><dd>when a new component is added to the entity</dd></dl><dl class="trigger"><dt>RemoveComponent <span>[<span class="trigger-data"><span class="obj-name">Component</span><span class="obj-props"> = {String}</span></span>]</span></dt><dd>when a component is removed from the entity</dd></dl><dl class="trigger"><dt>Remove </dt><dd>when the entity is removed by calling .destroy()</dd></dl></div></div></div><div class="eventPageBlock"><h4>.attr</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Change <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {key: value}</span></span>]</span></dt><dd>when properties change</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.init</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Load </dt><dd>Just after the viewport is initialised. Before the EnterFrame loops is started</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.stop</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>CraftyStop <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {bool clearState}</span></span>]</span></dt><dd>when the game is stopped</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.pause</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Pause </dt><dd>when the game is paused</dd></dl><dl class="trigger"><dt>Unpause </dt><dd>when the game is unpaused</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.timer.steptype</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>NewSteptype <span>[<span class="trigger-data"><span class="obj-name">New steptype</span><span class="obj-props"> = { mode, maxTimeStep }</span></span>]</span></dt><dd>when the current steptype changes</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.timer.step</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>EnterFrame <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { frame: Number, dt:Number }</span></span>]</span></dt><dd>Triggered on each frame.  Passes the frame number, and the amount of time since the last frame.  If the time is greater than maxTimestep, that will be used instead.  (The default value of maxTimestep is 50 ms.)</dd></dl><dl class="trigger"><dt>ExitFrame <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { frame: Number, dt:Number }</span></span>]</span></dt><dd>Triggered after each frame.  Passes the frame number, and the amount of time since the last frame.  If the time is greater than maxTimestep, that will be used instead.  (The default value of maxTimestep is 50 ms.)</dd></dl><dl class="trigger"><dt>PreRender </dt><dd>Triggered every time immediately before a scene should be rendered</dd></dl><dl class="trigger"><dt>RenderScene </dt><dd>Triggered every time a scene should be rendered</dd></dl><dl class="trigger"><dt>PostRender </dt><dd>Triggered every time immediately after a scene should be rendered</dd></dl><dl class="trigger"><dt>MeasureWaitTime <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Number}</span></span>]</span></dt><dd>Triggered at the beginning of each step after the first.  Passes the time the game loop waited between steps.</dd></dl><dl class="trigger"><dt>MeasureFrameTime <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Number}</span></span>]</span></dt><dd>Triggered after each frame.  Passes the time it took to advance one frame.</dd></dl><dl class="trigger"><dt>MeasureRenderTime <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Number}</span></span>]</span></dt><dd>Triggered after each render. Passes the time it took to render the scene</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.timer.FPS</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>FPSChange <span>[<span class="trigger-data"><span class="obj-name">new target FPS</span><span class="obj-props"> = {Number}</span></span>]</span></dt><dd>Triggered when the target FPS is changed by user</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.e</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>NewEntity <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { id:Number }</span></span>]</span></dt><dd>When the entity is created and all components are added</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.asset</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>NewAsset <span>[<span class="trigger-data"><span class="obj-name">key and value of new added asset.</span><span class="obj-props"> = {Object}</span></span>]</span></dt><dd>After setting new asset</dd></dl></div></div></div><div class="eventPageBlock"><h4>Model</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Change </dt><dd>When any data on the model has changed.</dd></dl><dl class="trigger"><dt>Change[key] </dt><dd>When the specific key on the model has changed.</dd></dl><dl class="trigger"><dt>Change[key.key] </dt><dd>The nested key value has changed.</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.scene</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>SceneChange <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { oldScene:String, newScene:String }</span></span>]</span></dt><dd>just before a new scene is initialized</dd></dl><dl class="trigger"><dt>SceneDestroy <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { newScene:String  }</span></span>]</span></dt><dd>just before the current scene is destroyed</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.s</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>SystemLoaded <span>[<span class="trigger-data"><span class="obj-name">system object</span><span class="obj-props"> = {obj}</span></span>]</span></dt><dd>When the system has initialized itself</dd></dl><dl class="trigger"><dt>SystemDestroyed <span>[<span class="trigger-data"><span class="obj-name">system object</span><span class="obj-props"> = {obj}</span></span>]</span></dt><dd>Right before the system is destroyed</dd></dl></div></div></div><div class="eventPageBlock"><h4>Tween</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>TweenEnd <span>[<span class="trigger-data"><span class="obj-name">property</span><span class="obj-props"> = {String}</span></span>]</span></dt><dd>when a tween finishes</dd></dl></div></div></div><div class="eventPageBlock"><h4>DebugCanvas</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>DebugDraw </dt><dd>when the entity is ready to be drawn to the stage</dd></dl><dl class="trigger"><dt>NoCanvas </dt><dd>if the browser does not support canvas</dd></dl></div></div></div><div class="eventPageBlock"><h4>Canvas</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Draw <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {type: &quot;canvas&quot;, pos, co, ctx}</span></span>]</span></dt><dd>when the entity is ready to be drawn to the stage</dd></dl><dl class="trigger"><dt>NoCanvas </dt><dd>if the browser does not support canvas</dd></dl></div></div></div><div class="eventPageBlock"><h4>.color</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the color changes</dd></dl></div></div></div><div class="eventPageBlock"><h4>.DOM</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Draw <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { style:String, type:&quot;DOM&quot;, co}</span></span>]</span></dt><dd>when the entity is ready to be drawn to the stage</dd></dl></div></div></div><div class="eventPageBlock"><h4>.image</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the image is loaded</dd></dl></div></div></div><div class="eventPageBlock"><h4>Particles</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>ParticleEnd </dt><dd>when the particle animation has finished</dd></dl></div></div></div><div class="eventPageBlock"><h4>Renderable</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the entity needs to be redrawn</dd></dl></div></div></div><div class="eventPageBlock"><h4>.flip</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the entity has flipped</dd></dl></div></div></div><div class="eventPageBlock"><h4>.unflip</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the entity has unflipped</dd></dl></div></div></div><div class="eventPageBlock"><h4>SpriteAnimation</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>StartAnimation <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Reel}</span></span>]</span></dt><dd>When an animation starts playing, or is resumed from the paused state</dd></dl><dl class="trigger"><dt>AnimationEnd <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>When the animation finishes</dd></dl><dl class="trigger"><dt>FrameChange <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>Each time the frame of the current reel changes</dd></dl><dl class="trigger"><dt>ReelChange <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>When the reel changes</dd></dl></div></div></div><div class="eventPageBlock"><h4>Sprite</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the sprites change</dd></dl></div></div></div><div class="eventPageBlock"><h4>Text</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the text is changed</dd></dl></div></div></div><div class="eventPageBlock"><h4>.textFont</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd></dd></dl></div></div></div><div class="eventPageBlock"><h4>.unselectable</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd></dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.viewport</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>ViewportScroll </dt><dd>when the viewport&#x27;s x or y coordinates change</dd></dl><dl class="trigger"><dt>ViewportScale </dt><dd>when the viewport&#x27;s scale changes</dd></dl><dl class="trigger"><dt>ViewportResize </dt><dd>when the viewport&#x27;s dimension&#x27;s change</dd></dl><dl class="trigger"><dt>InvalidateViewport </dt><dd>when the viewport changes</dd></dl><dl class="trigger"><dt>StopCamera </dt><dd>when any camera animations should stop, such as at the start of a new animation.</dd></dl><dl class="trigger"><dt>CameraAnimationDone </dt><dd>when a camera animation reaches completion</dd></dl></div></div></div><div class="eventPageBlock"><h4>Crafty.viewport.reset</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>StopCamera </dt><dd>called to cancel camera animations</dd></dl></div></div></div><div class="eventPageBlock"><h4>WebGL</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Draw <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {type: &quot;canvas&quot;, pos, co, ctx}</span></span>]</span></dt><dd>when the entity is ready to be drawn to the stage</dd></dl><dl class="trigger"><dt>NoCanvas </dt><dd>if the browser does not support canvas</dd></dl></div></div></div><div class="eventPageBlock"><h4>2D</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Move <span>[<span class="trigger-data"><span class="obj-name">Old position</span><span class="obj-props"> = { _x:Number, _y:Number, _w:Number, _h:Number }</span></span>]</span></dt><dd>when the entity has moved</dd></dl><dl class="trigger"><dt>Invalidate </dt><dd>when the entity needs to be redrawn</dd></dl><dl class="trigger"><dt>Rotate <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}}</span></span>]</span></dt><dd>when the entity is rotated</dd></dl><dl class="trigger"><dt>Reorder </dt><dd>when the entity&#x27;s z index has changed</dd></dl></div></div></div><div class="eventPageBlock"><h4>.offsetBoundary</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>BoundaryOffset </dt><dd>when the MBR offset changes</dd></dl></div></div></div><div class="eventPageBlock"><h4>Collision</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>HitOn <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { hitData }</span></span>]</span></dt><dd>Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using `resetHitChecks(component)`).</dd></dl><dl class="trigger"><dt>HitOff <span>[<span class="trigger-data"><span class="obj-name">componentName</span><span class="obj-props"> = {String}</span></span>]</span></dt><dd>Triggered when collision with a specific component type ceases</dd></dl></div></div></div><div class="eventPageBlock"><h4>.collision</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>NewHitbox <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Crafty.polygon}</span></span>]</span></dt><dd>when a new hitbox is assigned</dd></dl></div></div></div><div class="eventPageBlock"><h4>AngularMotion</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Rotated <span>[<span class="trigger-data"><span class="obj-name">Old rotation</span><span class="obj-props"> = {Number}</span></span>]</span></dt><dd>When entity has rotated due to angular velocity/acceleration a Rotated event is triggered.</dd></dl><dl class="trigger"><dt>NewRotationDirection <span>[<span class="trigger-data"><span class="obj-name">New direction</span><span class="obj-props"> = {-1 | 0 | 1}</span></span>]</span></dt><dd>When entity has changed rotational direction due to rotational velocity a NewRotationDirection event is triggered. The event is triggered once, if direction is different from last frame.</dd></dl><dl class="trigger"><dt>MotionChange <span>[<span class="trigger-data"><span class="obj-name">Motion property name and old value</span><span class="obj-props"> = { key: String, oldValue: Number }</span></span>]</span></dt><dd>When a motion property has changed a MotionChange event is triggered.</dd></dl></div></div></div><div class="eventPageBlock"><h4>Motion</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>Moved <span>[<span class="trigger-data"><span class="obj-name">Old position</span><span class="obj-props"> = { axis: &#x27;x&#x27; | &#x27;y&#x27;, oldValue: Number }</span></span>]</span></dt><dd>When entity has moved due to velocity/acceleration on either x or y axis a Moved event is triggered. If the entity has moved on both axes for diagonal movement the event is triggered twice.</dd></dl><dl class="trigger"><dt>NewDirection <span>[<span class="trigger-data"><span class="obj-name">New direction</span><span class="obj-props"> = { x: -1 | 0 | 1, y: -1 | 0 | 1 }</span></span>]</span></dt><dd>When entity has changed direction due to velocity on either x or y axis a NewDirection event is triggered. The event is triggered once, if direction is different from last frame.</dd></dl><dl class="trigger"><dt>MotionChange <span>[<span class="trigger-data"><span class="obj-name">Motion property name and old value</span><span class="obj-props"> = { key: String, oldValue: Number }</span></span>]</span></dt><dd>When a motion property has changed a MotionChange event is triggered.</dd></dl></div></div></div><div class="eventPageBlock"><h4>Supportable</h4><div class="triggered-events"><div class="trigger-list"><dl class="trigger"><dt>LandedOnGround </dt><dd>When entity has landed. This event is triggered with the object the entity landed on.</dd></dl><dl class="trigger"><dt>LiftedOffGround </dt><dd>When entity has lifted off. This event is triggered with the object the entity stood on before lift-off.</dd></dl><dl class="trigger"><dt>CheckLanding </dt><dd>When entity is about to land. This event is triggered with the object the entity is about to land on. Third parties can respond to this event and prevent the entity from being able to land.</dd></dl></div></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="/images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="/images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="/images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="/">Home</a></li>
				<li><a href="/getting-started/">Getting started</a></li>
				<li><a href="/documentation/">Documentation</a></li>
				<li><a href="/api/">API</a></li>
				<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
				<li><a href="/components/">Modules</a></li>
				<li class="emph"><a href="/#install">Download</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
